<template>
    <div class="parent">
        <div class="header">
            <div class="column_one">
                <div class="row_one">
                    <text class="text">项目</text>
                </div>
                <div class="row_two">
                    <text class="text">市级责任单位</text>
                </div>
                <div class="row_three">
                    <text class="text">内容区属</text>
                </div>
            </div>
            <div class="column_two">
                <div class="coluTwo_row_one">
                    <text class="text">农村公共厕所改造</text>
                </div>
                <div class="coluTwo_row_two">
                    <text class="text">市城市管理委</text>
                </div>
                <div class="coluTwo_row_three">
                    <div class="column_three_left">
                        <text class="text">农村公共厕所整治</text>
                    </div>
                    <div class="column_three_right">
                        <text class="text">公厕长效管护机制</text>
                    </div>
                </div>
                <div class="coluTwo_row_four">
                    <div class="column_four_left">
                        <div class="column_four_left_row_one">
                            <div class="column_four_left_row_oneLeft">
                                <text class="text">各类等级公共厕所数量(座)</text>
                            </div>
                            <div class="column_four_left_row_oneRight">
                                <text class="text">三类以下公厕改造提升情况(座)</text>
                            </div>
                        </div>
                        <div class="column_four_left_row_two">
                            <div class="column_four_left_row_twoLeft">
                                <div class="towLeft_left_one">
                                    <text class="text">合计</text>
                                </div>
                                <div class="towLeft_left_one">
                                    <text class="text">一类</text>
                                </div>
                                <div class="towLeft_left_one">
                                    <text class="text">二类</text>
                                </div>
                                <div class="towLeft_left_one">
                                    <text class="text">三类</text>
                                </div>
                                <div class="towLeft_left_two">
                                    <text class="text">三类以下</text>
                                </div>
                            </div>
                            <div class="column_four_left_row_twoRight">
                                <div class="twoRight_one">
                                    <text class="text">旱厕总数</text>
                                </div>
                                <div class="twoRight_two">
                                    <text class="text">完成改造数量</text>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column_four_right">
                        <div class="column_four_right_one">
                            <text class="text">公厕管护费用投入(万元/年)</text>
                        </div>
                        <div class="column_four_right_two">
                            <text class="text">实现专业管护队伍数量(支)</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <scroller scroll-direction>
            <div class="cont">
                <div class="dataItem" v-for="(item, index) in datalist" :key="index">
                    <div class="contItem">
                        <text class="contText">{{item.XZQHMC}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GSS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.YLGSS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.ELGSS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.SLGSS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.SLYXGCS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.HCS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.HCGZS}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GCGHFY}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GCGHDW}}</text>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
import event from '../../net/event.js'
import { CTCE_USER_INFO } from '../../config/storageTypes.js'
import { getCache } from '../../util/storageUtils.js'
const modal = weex.requireModule('modal')
export default {
    name: 'listCont',
    props: ['datalist'],
    created () {
        this.$notice.loading.show()
    },
    mounted () {
        this.$notice.loading.hide()
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
    flex: 1;
}
.header{
    width: 750px;
    height: 488px;
    background-color: rgba(35,196,160,1);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.column_one{
    width: 75px;
    height: 488px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
}
.row_one{
    width: 75px;
    height: 50px;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
}
.row_two{
    width: 75px;
    height: 110px;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
}
.row_three{
    width: 75px;
    height: 358px;
    padding-left: 5px;
    justify-content: center;
    align-items: center;
}
.text{
    lines: 7;
    font-size:28px;
    font-family:PingFangSC-Semibold;
    color:rgba(255,255,255,1);
}
.column_two{
    width: 675px;
    height: 488px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
}
.coluTwo_row_one{
    width: 675px;
    height: 50px;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.coluTwo_row_two{
    width: 675px;
    height: 110px;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.coluTwo_row_three{
    width: 675px;
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}
.column_three_left{
    width: 525px;
    height: 80px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
}
.column_three_right{
    width: 150px;
    height: 80px;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
}
.coluTwo_row_four{
    width: 675px;
    height: 248px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.column_four_left{
    width: 525px;
    height: 248px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
}
.column_four_left_row_one{
    width: 525px;
    height: 100px;
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.column_four_left_row_oneLeft{
    width: 375px;
    height: 100px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
    
}
.column_four_left_row_oneRight{
    width: 150px;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.column_four_right{
    width: 150px;
    height: 248px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.column_four_right_one{
    width: 75px;
    height: 248px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}
.column_four_right_two{
    width: 75px;
    height: 248px;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}
.column_four_left_row_two{
    width: 525px;
    height: 148px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.column_four_left_row_twoLeft{
    width: 375px;
    height: 148px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.towLeft_left_one{
    width: 75px;
    height: 148px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
}
.towLeft_left_two{
    width: 75px;
    height: 148px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
}
.column_four_left_row_twoRight{
    width: 150px;
    height: 148px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.twoRight_one{
    width: 75px;
    height: 148px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
}
.twoRight_two{
    width: 75px;
    height: 148px;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
}
.cont{
    width: 750px;
    padding-bottom: 96px;
}
.dataItem{
    width: 750px;
    height: 80px;
    border-bottom-color: #dddbdb;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #F7FAFF;
}
.contItem{
    width: 75px;
    height: 80px;
    border-right-color: #dddbdb;
    border-right-style: solid;
    border-right-width: 2px;
    justify-content: center;
    align-items: center;
}
.contText{
    font-size: 24px;
    font-family:PingFangSC-Semibold;
    color: #333;
}
</style>
